<template>
  <div class="app-container">
    <today-use-offline />
    <el-row :gutter="10">
      <el-col :span="24">
        <el-card>
          <el-row :gutter="20">
            <el-col :span="7">
              <department-user-chart />
            </el-col>
            <el-col :span="10">
              <device-count-chart />
            </el-col>
            <el-col :span="7">
              <device-count-polar />
            </el-col>
          </el-row>
        </el-card>
      </el-col>
      <el-col v-if="haveSensor" :span="24">
        <el-card>
          <environment-max-and-min-gauge />
        </el-card>
      </el-col>
      <!-- <el-col
        v-if="haveSensor"
        :span="24">
        <el-card>
          <environment-max-and-min-chart />
        </el-card>
      </el-col> -->
      <el-col v-if="haveSensor" :span="24">
        <el-card>
          <environment-line-chart />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template slot="header">
            <el-button type="text" @click="toEnergyChart">{{ $t('More') }}</el-button>
          </template>
          <today-energy-bar :total="deviceCount" :group-count="deptMap" />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template slot="header">
            <el-button type="text" @click="toOfflineChart">{{ $t('More') }}</el-button>
          </template>
          <today-use-offline-bar :total="deviceCount" :group-count="deptMap" />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template slot="header">
            <el-button type="text" @click="toDeptUseChart">{{ $t('More') }}</el-button>
          </template>
          <today-dept-use-percent :total="deviceCount" :group-count="deptMap" />
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template slot="header">
            <el-button type="text" @click="toTypeUseChart">{{ $t('More') }}</el-button>
          </template>
          <today-type-use-percent :total="deviceCount" :group-count="typeMap" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import CalendarComponents from '@/views/device/calendar/components'
  import dashboardAPI from '@/api/dashboard/dashboard';
  import {
    DeviceCountMap
  } from '@/views/device/calendar/components/CalendarChart'
  import EnvironmentLineChart from '@/views/device/environment/EnvironmentLineChart.vue';
  import EnvironmentMaxAndMinChart from '@/views/device/environment/MaxAndMinChart.vue';
  import EnvironmentMaxAndMinGauge from '@/views/device/environment/MaxAndMinGauge.vue';
  import DepartmentUserChart from '@/views/components/dashboard/DepartmentUserChart.vue';
  import DeviceCountChart from '@/views/components/dashboard/DeviceCountChart.vue';
  import DeviceCountPolar from '@/views/components/dashboard/DeviceCountPolar.vue';

  import {
    listToMap
  } from '@/utils'
  import {
    DeviceType
  } from '@/views/device/common'

  export default {
    name: "DashBoard",
    mixins: [DeviceCountMap],
    components: {
      ...CalendarComponents,
      EnvironmentLineChart,
      EnvironmentMaxAndMinChart,
      EnvironmentMaxAndMinGauge,
      DepartmentUserChart,
      DeviceCountChart,
      DeviceCountPolar
    },
    data() {
      return {
        deviceCount: 0,
        deviceCountMap: {},
      }
    },
    computed: {
      haveSensor() {
        const {
          deviceCountMap
        } = this
        return deviceCountMap[DeviceType.TEMPERATURE_HUMIDITY] !== undefined || deviceCountMap[DeviceType.SENSOR] !==
          undefined
      }
    },
    created() {
      this.queryDeviceCount()
      this.$store.dispatch("getDepartmentList");
    },
    methods: {
      queryDeviceCount() {
        const vm = this
        dashboardAPI.deviceCount().then(res => {
          const {
            data
          } = res
          if (data === undefined) {
            return
          }
          var count = 0;
          data.forEach(each => {
            count += each.value
          })
          vm.deviceCount = count
          vm.deviceCountMap = listToMap(data, 'name')
        })
      },
      toEnergyChart() {
        this.$router.push({
          path: '/haijie/calendar/energy-chart'
        })
      },
      toOfflineChart() {
        this.$router.push({
          path: '/haijie/calendar/offline-chart'
        })
      },
      toDeptUseChart() {
        this.$router.push({
          path: '/haijie/calendar/department-chart'
        })
      },
      toTypeUseChart() {
        this.$router.push({
          path: '/haijie/calendar/type-chart'
        })
      }
    }
  }

</script>
